<template>
  <view class="address-page">
    <u-my-layOut :showNavbar="false" :navbarOption="{ bgColor: '#f6f4f7', title: '订单', border: true }" :color="{ statusBarHeightColor: '#f6f4f7' }">
      <template v-slot:header>
        <uv-navbar leftIconSize="21px" leftIconColor="#0b0b0b" :titleStyle="{fontSize: '16px', lineHeight: '30px'}" border @leftClick="leftClick" title="常用地址" :safeAreaInsetTop="false" :fixed="false" bgColor="#F7F5F8" />
      </template>
      <template v-slot:main>
        <view class="content pl30 pr30 pb30">
          <uv-empty v-if="tableData.length === 0" mode="address" />
          <div class="dz" v-for="(item, index) in tableData" :key="index">
            <div class="box fac" @click="chooseAddressTap(item)">
              <div class="p1755740594">
                <uv-avatar :text="updateInitial(item.name)" bg-color="#ffb34b"></uv-avatar>
              </div>
              <div class="p1755740702">
                <div class="fullAddress fz34 single-line">{{item.storey}}&nbsp;&nbsp;&nbsp;{{item.house_number}}</div>
                <div class="single-line pt20  fz30" style="width: 100%;color: #ADADAE;">{{item.address}}</div>
                <div class="fac ">
                  <div class="name fz30" style="color: #ADADAE;">{{item.name}}</div>
                  <div class="tel fz30" style="color: #ADADAE;">{{item.tel}}</div>
                </div>
              </div>
            </div>
            <div class="box1 p1755567399 fz30">
              <uv-checkbox-group shape="circle" v-model="item.isDefault" labelSize="28rpx">
                <uv-checkbox @change="isDefaultTap(item)" :labelColor="item.isDefault.includes(1) || item.isDefault.includes('1') ? '#E60012' : '#979898'" :class="item.isDefault.includes(1) || item.isDefault.includes('1') ? 'active' : ''" activeColor="#E60012" label="已设为默认" :name="1"></uv-checkbox>
              </uv-checkbox-group>
              <div class="fac">
                <div @click="delTap(item)" class="btn">删除</div>
                <div @click="eddTap(item)" class="btn">修改</div>
              </div>
            </div>
          </div>
        </view>
      </template>
      <template v-slot:footer>
        <div class="pb30">
          <div class="xjdz" @click="tabTap">新建地址</div>
        </div>
      </template>
    </u-my-layOut>

  </view>
</template>
<script>
import { getAddressList, getPickupAddressList, delAddress, setDefaultPickupAddress, setDefault, delPickupAddress } from '@/api'
import myLayOutVue from "./components/layOut.vue";
export default {
  components: {
    "u-my-layOut": myLayOutVue,
  },
  data() {
    return {
      routeQuery: {},
      page: 1, limit: 50,
      tableData: [],
      isOnShow: false
    }
  },

  onLoad(options) {
    if (options) this.routeQuery = options
    this.initPage()
  },
  onShow() {
    if (this.isOnShow) this.initPage()
  },
  onHide() {
    this.isOnShow = true
  },
  methods: {
    leftClick() {
      let r = this.routeQuery
      if (!r.type) {
        uni.navigateBack({ delta: 1 });
        return
      }
      if (r.type == 1) {
        uni.navigateBack({ url: '/pages-worker/takeout?type=' + r.type });
      } else if (r.type == 2 && r.t == 2) {
        uni.navigateBack({ url: '/pages-worker/checkout/fetch?type=' + r.type });
      } else if (r.type == 3 && r.t == 3) {
        uni.navigateBack({ url: '/pages-worker/checkout/buy?type=' + r.type + '&t=' + r.t });
      } else if (r.type == 4) {
        uni.navigateBack({ url: '/pages-worker/pet?type=' + this.routeQuery.type });
      } else {
        uni.navigateBack({ url: '/pages-worker/takeout?type=' + r.type });
      }
    },
    eddTap(item) {
      let t = this.routeQuery.t || ''
      if (!this.routeQuery.type) {
        uni.navigateTo({ url: './set-address?id=' + item.id })
      } else {
        uni.navigateTo({ url: './set-address?type=' + this.routeQuery.type + '&dzb=' + this.routeQuery.dzb + '&id=' + item.id + '&t=' + t })

      }
    },
    chooseAddressTap(item) {
      let key = this.routeQuery.dzb
      if (this.routeQuery.selAddress == 1) {
        uni.removeStorage({ key: 'dzb' });
        let eventChannel = getCurrentPages()[getCurrentPages().length - 1].getOpenerEventChannel()
        eventChannel.emit('acceptAddress', {
          id: item.id,
          name: item.name,
          tel: item.tel,
          province: item.province,
          city: item.city,
          area: item.area,
          address: item.address
        })
        uni.navigateBack()
        return
      }
      if (!this.routeQuery.type) return
      let obj = {}
      obj['type-' + this.routeQuery.dzb + '-' + this.routeQuery.type] = item
      uni.getStorage({
        key: 'dzb', success: res => {
          if (res.data) {
            obj = Object.assign({}, JSON.parse(res.data), obj)
            uni.setStorage({ key: 'dzb', data: JSON.stringify(obj) });
          }
        }
      });
      uni.setStorage({ key: 'dzb', data: JSON.stringify(obj) });
      if (this.routeQuery.t == 2) {
        uni.navigateBack({
          url: '/pages-worker/checkout/fetch?type=' + this.routeQuery.type
        });
      } else if (this.routeQuery.t == 3) {
        uni.navigateBack({
          url: '/pages-worker/checkout/buy?type=' + this.routeQuery.type
        });
      } else if (this.routeQuery.t == 4) {
        uni.navigateBack({
          url: '/pages-worker/pet?type=' + this.routeQuery.type
        });
      } else {
        uni.navigateBack({
          url: '/pages-worker/takeout?type=' + this.routeQuery.type
        });
      }

    },
    delTap(item) {

      uni.showModal({
        title: '提示',
        content: '确定删除吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({ title: '删除中', mask: true })
            if (this.routeQuery.dzb === 'Q') {
              delPickupAddress(item.id).then(res1 => {
                if (res1.code === 200) {
                  this.initPage()
                  uni.hideLoading()
                  uni.$uv.toast('删除成功')
                }
              })
            } else {
              delAddress(item.id).then(res1 => {
                if (res1.code === 200) {
                  this.initPage()
                  uni.hideLoading()
                  uni.$uv.toast('删除成功')
                }
              })
            }
          }
        }
      })
    },
    isDefaultTap(item) {
      this.$nextTick(() => {
        let is_default = 1
        if (item.isDefault.length === 0) is_default = 0
        this.tableData.map(item => {
          item.isDefault = []
          return item
        })
        if (this.routeQuery.dzb == 'Q') {
          setDefaultPickupAddress(item.id, { is_default: is_default }).then(res => {
            if (res.code === 200) this.initPage()
          })
        } else {
          setDefault(item.id, { is_default: is_default }).then(res => {
            if (res.code === 200) this.initPage()
          })
        }

      })
    },
    tabTap() {
      let t = this.routeQuery.t || ''
      if (!this.routeQuery.type) {
        uni.navigateTo({ url: './set-address' })
        return
      }
      uni.navigateTo({ url: './set-address?type=' + this.routeQuery.type + '&dzb=' + this.routeQuery.dzb + '&t=' + t })
    },
    initPage() {
      uni.hideLoading()
      uni.showLoading({ title: '加载中', mask: true })
      if (this.routeQuery.dzb === 'Q') {
        getPickupAddressList().then(res => {
          if (res.code === 200) {
            this.tableData = res.result.map(item => {
              item.fullAddress = item.province + item.area + item.city + item.town
              item.isDefault = [item.is_default]
              return item
            })
            uni.hideLoading()
          }
        })
      } else {
        getAddressList().then(res => {
          if (res.code === 200) {
            this.tableData = res.result.map(item => {
              item.fullAddress = item.province + item.city + item.area + item.town
              item.isDefault = [item.is_default]
              return item
            })
            uni.hideLoading()
          }
        })
      }
    },
    updateInitial(fullName) {
      if (fullName.trim()) {
        return fullName.trim().charAt(0);
      } else {
        return '';
      }
    }
  }

}
</script>

<style lang="scss">
page {
  background-color: #f6f4f7;
}

.p1755740594 {
  .uv-avatar.uv-avatar--circle {
    width: 100rpx !important;
    height: 100rpx !important;
  }

  .uv-text__value {
    font-size: 46rpx !important;
  }
}

.address-page {
  .uv-empty {
    background-color: #fff !important;
    border-radius: 20rpx !important;
    padding-top: 50rpx !important;
    padding-bottom: 50rpx !important;
  }

  .uv-checkbox.uv-checkbox-label--left.active {
    .uv-checkbox__label-wrap span {
      color: #e60012 !important;
    }
  }
}
</style>

<style lang="scss" scoped>
.address-page {

  .p1755740702 {
    padding-left: 30rpx;
    box-sizing: border-box;
    width: calc(100% - 100rpx);
  }

  .dz {
    padding: 30rpx 30rpx 20rpx 30rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    border-radius: 20rpx;

    .box {
      border-bottom: 2rpx solid #eff0f0;
      padding-bottom: 30rpx;
    }

    .box1 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 20rpx;

      .btn {
        font-size: 28rpx;
        color: #979898;
      }

      .btn:nth-child(1) {
        padding-right: 60rpx;
      }
    }

    .fullAddress {
      width: 100%;
      color: #333333;
    }

    .tel {
      padding-left: 20rpx;
    }
  }

  .content {
    border-radius: 20rpx;
		padding-top: 30rpx;
  }

  .xjdz {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90rpx;
    background: #de0012;
    font-weight: 600;
    font-size: 36rpx;
    color: #ffffff;
    border-radius: 50rpx;
		box-sizing: border-box;
		margin-left: 30rpx;
		margin-right: 30rpx;
  }
}
</style>